<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			*{
				font: 16px "微软雅黑";
				/* list-style-type: none; */  /*去掉无序列表样式 针对一项列表项标记*/
				list-style: none;        /*针对三项---列表项标记 list-style-type
				                                     列表项位置  list-style-position
													 列表项图片  list-style-image*/
				/* 去掉外边距  ul li 存在外边距 */
				margin: 0;
				padding: 0;
				
			}
			aside{
				width: 235px;
				height: 530px;
				background: red;
				/* 盒子模型: 外边距 */
				margin: 280px 50px;
			}
			aside ul.ul_sidebar li{
				width: 235px;
				height: 50px;
				text-align: left;
				line-height: 50px;
				curssor: pointer;
				/* 挂靠位【固定】相对定位 */
				position: relative;
				top: 15px;
				
				
			}
			aside ul.ul_sidebar li:hover{
				background: yellow;
			}
			/* 挂靠点 【活动的---绝对定位 按照父级来定位】 */
			aside ul.ul_sidebar div.out{
				width: 700px;
				height: 460px;
				border: 1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 285px;
				
				display: none;
			}
			/* 新增样式 */
			aside ul.ul_sidebar li span{
				position: absolute;
				left: 200px;
				top: 15px;
				
				/* float: right;
				padding-right: 20px; */
			}
			aside ul.ul_sidebar li{
				padding-left: 20px;
			}
			
		</style>
	</head>
	<body>
		<!-- html结构  外层div  sidebar(侧边栏)
		html结构标记 aside元素 语义化元素 表示左栏侧边栏以及广告
								有利于SEU优化
		                      通常代替div+id/class
							  
		               内层ul li   ul.ul_sidebar li*10    写第一个
			css结构: 内部引入方式
			        通配选择器---合理添加
					外层aside 235*460 background背景色
					内层 每个li加宽高(235*46)
					内层文本 垂直 居中 对齐  文字: 16px
					鼠标移动上去li 背景色改变 -->
					<aside>
						<ul class="ul_sidebar">
							<!-- 弹出框 div+css别名  绝对定位-->
							<div class="out"></div>
							<li>手机 平板 电话卡<span>></span></li>
							<li>电视 盒子<span>></span></li>
							<li>路由器 智能硬件<span>></span></li>
							<li>移动电源 插线板<span>></span></li>
							<li>耳机 音箱<span>></span></li>
							<li>电池 存储卡<span>></span></li>
							<li>保护套 后盖<span>></span></li>
							<li>贴膜 其他配件<span>></span></li>
							<li>米兔 服装<span>></span></li>
							<li>箱包 其他周边<span>></span></li>
						</ul>
					</aside>
					<script>
						//左栏实现
						//1.添加事件
						//2.添加切换效果(li)
						//3.切换效果
						$("aside ul.ul_sidebar li").hover(function(){
							//弹出框  默认隐藏 先显示
							$("aside ul.ul_sidebar div.out").css("display","block");
						},function(){
							$("aside ul.ul_sidebar div.out").css("display","none");
						});
					</script>
	</body>
</html>

<!-- css 悬停效果  效果不能实现  不能切换
	jq 悬停效果事件源  hover   切换效果问题
	语法: $("选择器").hover(function(){},function(){});-->